<template>
	<view class="event-container">
		<view style="padding: 20rpx;">
			<view class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">上报人</view>
				</view>
			</view>
			<view class="c-input">
				<input type="text" v-model="params.CreateUser" placeholder="请输入上报人姓名">
			</view>
			<view class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">联系方式</view>
				</view>
			</view>
			<view class="c-input">
				<input type="number" v-model="params.Tel" placeholder="请输入上报人联系方式">
			</view>
			<view class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">事件描述</view>
				</view>
			</view>
			<!-- <view class="title"><text style="color: red;">*</text>评价描述</view> -->
			<textarea style="height: 320rpx;" v-model="params.EventDesc" class="content" placeholder="请输入事件描述..." name="" id="" cols="30" rows="10"></textarea>
			<view class="toast-top">
				<view class="flex">
					<text style="color: #fff;">*</text>
					<view class="desc">附件</view>
				</view>
			</view>
			<uploader :max="6" :bmargin="6" v-model="params.Attachments"></uploader>
			<view class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">组织</view>
				</view>
			</view>
			<view @click="handleTap('picker1')" class="c-input">
				<text :class="{color: label1 === '请选择组织'}">{{label1}}</text>
				<lb-picker ref="picker1" mode="selector" :list="orgList" :dataset="{ name: 'label1' }"
				 @change="handleChange" @confirm="handleConfirm1" @cancel="handleCancel">
				</lb-picker>
			</view>
			<view class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">派发类型</view>
				</view>
			</view>
			<view @click="handleTap('picker')" class="c-input">
				<text :class="{color: label === '请选择派发类型'}">{{label}}</text>
				<lb-picker ref="picker" mode="selector" :list="assignTypeList" :dataset="{ name: 'label' }"
				 @change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
			</view>
			<view v-if="params.Isauto === '1'" class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">部门机构</view>
				</view>
			</view>
			<view v-if="params.Isauto === '1'" @click="handleTap('picker2')" class="c-input">
				<text :class="{color: label2 === '请选择部门机构'}">{{label2}}</text>
				<lb-picker ref="picker2" mode="selector" :list="departList" :dataset="{ name: 'label2' }"
				 @change="handleChange" @confirm="handleConfirm2" @cancel="handleCancel">
				</lb-picker>
			</view>
			<view v-if="params.Isauto === '1'" class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">处理人</view>
				</view>
			</view>
			<view v-if="params.Isauto === '1'" @click="handleTap('picker3')" class="c-input">
				<text :class="{color: label3 === '请选择处理人'}">{{label3}}</text>
				<lb-picker ref="picker3" mode="selector" :list="personList" :dataset="{ name: 'label3' }"
				 @change="handleChange" @confirm="handleConfirm3" @cancel="handleCancel">
				</lb-picker>
			</view>
			<view v-if="params.Isauto === '1'" class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">事件大类</view>
				</view>
			</view>
			<view v-if="params.Isauto === '1'" @click="handleTap('picker4')" class="c-input">
				<text :class="{color: label4 === '请选择事件大类'}">{{label4}}</text>
				<lb-picker ref="picker4" mode="selector" :list="eventType" :dataset="{ name: 'label4' }"
				 @change="handleChange" @confirm="handleConfirm4" @cancel="handleCancel">
				</lb-picker>
			</view>
			<view v-if="params.Isauto == '1'" class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">事件小类</view>
				</view>
			</view>
			<view v-if="params.Isauto == '1'" @click="handleTap('picker5')" class="c-input">
				<text :class="{color: label5 === '请选择事件小类'}">{{label5}}</text>
				<lb-picker ref="picker5" mode="selector" :list="eventList" :dataset="{ name: 'label5' }"
				 @change="handleChange" @confirm="handleConfirm5" @cancel="handleCancel">
				</lb-picker>
			</view>
			<!-- <view v-if="params.Isauto === '1'"  class="c-input">
				<uni-combox labelWidth="400rpx" label="请选择事件小类:" @input="handleInput" :candidates="list" v-model="event"></uni-combox>
			</view> -->
			<!-- <view v-if="!params['转派人员id']" :class="label1 == '请选择任务执行人' ? 'color':''" class="tap"
				@click="toChoose(query,3)">{{label1}}</view>
			
			<view @click="toChoose1(query,3)" v-for="(item,index) in params['执行人']"
				style="margin: 2px;display: inline-block;" :key="index">
				<text>{{item}};</text>
			</view>
			<input class="c-input" type="text" disabled placeholder="请选择转派人员"> -->
			
		</view>
		<button class="btn" @click="submit">提交</button>
	</view>
</template>

<script>
	import uniCombox from "@/components/uni-combox/uni-combox"
	import LbPicker from '@/components/lb-picker'
	import uploader from '@/components/my-components/image-uploader.vue'
	export default {
		components: {
			LbPicker,
			uploader,
			uniCombox
		},
		data() {
			return {
				assignTypeList: this.$type.assignTypeList,
				eventType: this.$type.eventType,
				delayTypeList: this.$type.delayTypeList,
				label: '请选择派发类型',
				label1: '请选择组织',
				label3: '请选择处理人',
				label2: '请选择部门机构',
				label4: '请选择事件大类',
				label5: '请选择事件小类',
				workerList: [],
				params: {
					id: null,
					CreateUser: '',
					Tel: '',
					EventDesc: '',
					OrgId: '',
					OrgName: '',
					Isauto: '',
					DepartFlag: '',
					DepartName: '',
					HandleUser: '',
					HandleName: '',
					Class1: '',
					Class1Name: '',
					Class2: '',
					Class2Name: '',
					Attachments: []
				},
				orgList: [],
				departList: [],
				personList: [],
				eventList: [],
				allList: []
			}
		},
		onLoad(options) {
			this.params.id = +options.id
			// console.log(JSON.parse(options.item))
			this.initParams(JSON.parse(options.item))
			this.getOrg()
			this.getEventClass()
		},
		methods: {
			initParams(params) {
				console.log(params)
				this.params.CreateUser = params.联系人姓名
				this.params.Tel = params.联系人电话
				this.params.EventDesc = params.所属项目名称 + params.报事位置 + params.报事描述
				this.params.Attachments = params.报事附件
			},
			getOrg() {
				this.$http2.post('ticketSystem/tipoff/orgs').then(res => {
					if(res.code === 10000) {
						console.log(res)
						res.data.list.forEach(item => {
							item.label = item.OrgName
							item.value = item.OrgName
						})
						this.orgList = res.data.list
					}
				})
			},
			getPerson(DepartId) {
				this.$http2.post('ticketSystem/tipoff/users', {DepartId}).then(res => {
					if(res.code === 10000) {
						console.log(res)
						res.data.list.forEach(item => {
							item.label = item.User
							item.value = item.User
						})
						this.personList = res.data.list
					}
				})
			},
			getDepts(OrgId) {
				this.$http2.post('ticketSystem/tipoff/depts', {OrgId}).then(res => {
					if(res.code === 10000) {
						console.log(res)
						res.data.list.forEach(item => {
							item.label = item.DepartName
							item.value = item.DepartName
						})
						this.departList = res.data.list
					}
				})
			},
			getEventClass(value) {
				this.$http2.post('ticketSystem/tipoff/class',{Class: value}).then(res => {
					if(res.code === 10000) {
						console.log(res)
						res.data.list.forEach(item => {
							item.label = item.Class2Name
							item.value = item.Class2Name
							if(!this.eventList.find(aItem => aItem.Class2Name == item.Class2Name)) {
								this.allList.push(item)
								this.eventList.push(item)
							}
						})
						// this.eventList = res.data.list
					}
				})
			},
			filterEvent(id) {
				console.log(id)
				// this.list = []
				this.eventList = this.allList.filter(item => item.Class1 === id)
				// console.log(this.eventList)
			},
			submit() {
				if (this.params.CreateUser.trim() == '') {
					uni.showToast({
						title: '请填写联系人',
						icon: 'none'
					})
				} else if (this.params.Tel.trim() == '') {
					uni.showToast({
						title: '请填写联系方式',
						icon: 'none'
					})
				} else if(this.params.EventDesc.trim() == '') {
					uni.showToast({
						title: '请填写事件描述',
						icon: 'none'
					})
				} else if(!this.params.OrgId) {
					uni.showToast({
						title: '请选择组织',
						icon: 'none'
					})
				} else if(!this.params.Isauto) {
					uni.showToast({
						title: '请选择派单类型',
						icon: 'none'
					})
				} else if(this.params.Isauto == '1') {
					if(!this.params.DepartId) {
						uni.showToast({
							title: '请选择部门机构',
							icon: 'none'
						})
					}else if(!this.params.HandleUser) {
						uni.showToast({
							title: '请选择处理人',
							icon: 'none'
						})
					}else if(!this.params.Class1) {
						uni.showToast({
							title: '请选择事件大类',
							icon: 'none'
						})
					}else if(!this.params.Class2) {
						uni.showToast({
							title: '请选择事件小类',
							icon: 'none'
						})
					}else {
						this.addEvent()
					}
				}
				else {
					this.addEvent()
				}
			},
			addEvent() {
				
				console.log(this.params)
				uni.showLoading({
					mask: true
				})
				this.$http2.post('ticketSystem/tipoff/submit', this.params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						uni.redirectTo({
							url: '/ticketSystem/acceptSuccess/acceptSuccess?path=../index/index' + '&title=返回工单首页'
						})
						
					}else if(res.code === 50010) {
						uni.showToast({
							title: '推送失败',
							icon: 'none'
						})
					}
				})
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm1(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item.label
					console.log(e)
					// this.params.时限单位 = e.value
					this.params.OrgName = e.item.OrgName
					this.params.OrgId = e.item.OrgId
					this.getDepts(e.item.OrgId)
					this.label2 = '请选择部门机构'
					this.label3 = '请选择处理人'
					// this.params.unit = e.item.id
					// this.params4.education = e.item.id
					if(name && label){
						this[name] = label
					}
				}
			},
			handleConfirm2(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.DepartFlag = e.item.DepartName
					this.params.DepartId = e.item.DepartId
					this.params.DepartName = e.item.DepartName
					this.getPerson(e.item.DepartId)
					this.label3 = '请选择处理人'
					if(name && label){
						this[name] = label
					}
				}
			},
			handleConfirm3(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.HandleUser = e.item.UserId
					this.params.HandleName = e.item.User
					if(name && label){
						this[name] = label
					}
				}
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.Isauto = e.item.id
					console.log(this.params)
					if (name && label) {
						this[name] = label
					}
				}
			},
			// 事件大类
			handleConfirm4(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					this.params.Class1 = e.item.id
					this.params.Class1Name = e.item.label
					this.filterEvent(e.item.id)
					this.label5 = '请选择事件小类'
					const label = e.item.label
					if (name && label) {
						this[name] = label
					}
				}
			},
			handleConfirm5(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.Class2 = e.item.Class2
					this.params.Class2Name = e.item.Class2Name
					if (name && label) {
						this[name] = label
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '../../style/input.scss';
</style>
